<!DOCTYPE html>
<html>
<head>
    <title>Cookie</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /**
   * prism.js Github theme based on GitHub's theme.
   * @author Sam Clarke
   */
        code[class*="language-"],
        pre[class*="language-"] {
            color: #333;
            background: none;
            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
            text-align: left;
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.4;

            -moz-tab-size: 8;
            -o-tab-size: 8;
            tab-size: 8;

            -webkit-hyphens: none;
            -moz-hyphens: none;
            -ms-hyphens: none;
            hyphens: none;
        }

        /* Code blocks */
        pre[class*="language-"] {
            padding: .8em;
            overflow: auto;
            /* border: 1px solid #ddd; */
            border-radius: 3px;
            /* background: #fff; */
            background: #f5f5f5;
        }

        /* Inline code */
        :not(pre) > code[class*="language-"] {
            padding: .1em;
            border-radius: .3em;
            white-space: normal;
            background: #f5f5f5;
        }

        .token.comment,
        .token.blockquote {
            color: #969896;
        }

        .token.cdata {
            color: #183691;
        }

        .token.doctype,
        .token.punctuation,
        .token.variable,
        .token.macro.property {
            color: #333;
        }

        .token.operator,
        .token.important,
        .token.keyword,
        .token.rule,
        .token.builtin {
            color: #a71d5d;
        }

        .token.string,
        .token.url,
        .token.regex,
        .token.attr-value {
            color: #183691;
        }

        .token.property,
        .token.number,
        .token.boolean,
        .token.entity,
        .token.atrule,
        .token.constant,
        .token.symbol,
        .token.command,
        .token.code {
            color: #0086b3;
        }

        .token.tag,
        .token.selector,
        .token.prolog {
            color: #63a35c;
        }

        .token.function,
        .token.namespace,
        .token.pseudo-element,
        .token.class,
        .token.class-name,
        .token.pseudo-class,
        .token.id,
        .token.url-reference .token.variable,
        .token.attr-name {
            color: #795da3;
        }

        .token.entity {
            cursor: help;
        }

        .token.title,
        .token.title .token.punctuation {
            font-weight: bold;
            color: #1d3e81;
        }

        .token.list {
            color: #ed6a43;
        }

        .token.inserted {
            background-color: #eaffea;
            color: #55a532;
        }

        .token.deleted {
            background-color: #ffecec;
            color: #bd2c00;
        }

        .token.bold {
            font-weight: bold;
        }

        .token.italic {
            font-style: italic;
        }

        /* JSON */
        .language-json .token.property {
            color: #183691;
        }

        .language-markup .token.tag .token.punctuation {
            color: #333;
        }

        /* CSS */
        code.language-css,
        .language-css .token.function {
            color: #0086b3;
        }

        /* YAML */
        .language-yaml .token.atrule {
            color: #63a35c;
        }

        code.language-yaml {
            color: #183691;
        }

        /* Ruby */
        .language-ruby .token.function {
            color: #333;
        }

        /* Markdown */
        .language-markdown .token.url {
            color: #795da3;
        }

        /* Makefile */
        .language-makefile .token.symbol {
            color: #795da3;
        }

        .language-makefile .token.variable {
            color: #183691;
        }

        .language-makefile .token.builtin {
            color: #0086b3;
        }

        /* Bash */
        .language-bash .token.keyword {
            color: #0086b3;
        }

        html body {
            font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            background-color: #fff;
            overflow: initial;
            box-sizing: border-box;
            word-wrap: break-word
        }

        html body > :first-child {
            margin-top: 0
        }

        html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
            line-height: 1.2;
            margin-top: 1em;
            margin-bottom: 16px;
            color: #000
        }

        html body h1 {
            font-size: 2.25em;
            font-weight: 300;
            padding-bottom: .3em
        }

        html body h2 {
            font-size: 1.75em;
            font-weight: 400;
            padding-bottom: .3em
        }

        html body h3 {
            font-size: 1.5em;
            font-weight: 500
        }

        html body h4 {
            font-size: 1.25em;
            font-weight: 600
        }

        html body h5 {
            font-size: 1.1em;
            font-weight: 600
        }

        html body h6 {
            font-size: 1em;
            font-weight: 600
        }

        html body h1, html body h2, html body h3, html body h4, html body h5 {
            font-weight: 600
        }

        html body h5 {
            font-size: 1em
        }

        html body h6 {
            color: #5c5c5c
        }

        html body strong {
            color: #000
        }

        html body del {
            color: #5c5c5c
        }

        html body a:not([href]) {
            color: inherit;
            text-decoration: none
        }

        html body a {
            color: #08c;
            text-decoration: none
        }

        html body a:hover {
            color: #00a3f5;
            text-decoration: none
        }

        html body img {
            max-width: 100%
        }

        html body > p {
            margin-top: 0;
            margin-bottom: 16px;
            word-wrap: break-word
        }

        html body > ul, html body > ol {
            margin-bottom: 16px
        }

        html body ul, html body ol {
            padding-left: 2em
        }

        html body ul.no-list, html body ol.no-list {
            padding: 0;
            list-style-type: none
        }

        html body ul ul, html body ul ol, html body ol ol, html body ol ul {
            margin-top: 0;
            margin-bottom: 0
        }

        html body li {
            margin-bottom: 0
        }

        html body li.task-list-item {
            list-style: none
        }

        html body li > p {
            margin-top: 0;
            margin-bottom: 0
        }

        html body .task-list-item-checkbox {
            margin: 0 .2em .25em -1.8em;
            vertical-align: middle
        }

        html body .task-list-item-checkbox:hover {
            cursor: pointer
        }

        html body blockquote {
            margin: 16px 0;
            font-size: inherit;
            padding: 0 15px;
            color: #5c5c5c;
            border-left: 4px solid #d6d6d6
        }

        html body blockquote > :first-child {
            margin-top: 0
        }

        html body blockquote > :last-child {
            margin-bottom: 0
        }

        html body hr {
            height: 4px;
            margin: 32px 0;
            background-color: #d6d6d6;
            border: 0 none
        }

        html body table {
            margin: 10px 0 15px 0;
            border-collapse: collapse;
            border-spacing: 0;
            display: block;
            width: 100%;
            overflow: auto;
            word-break: normal;
            word-break: keep-all
        }

        html body table th {
            font-weight: bold;
            color: #000
        }

        html body table td, html body table th {
            border: 1px solid #d6d6d6;
            padding: 6px 13px
        }

        html body dl {
            padding: 0
        }

        html body dl dt {
            padding: 0;
            margin-top: 16px;
            font-size: 1em;
            font-style: italic;
            font-weight: bold
        }

        html body dl dd {
            padding: 0 16px;
            margin-bottom: 16px
        }

        html body code {
            font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
            font-size: .85em !important;
            color: #000;
            background-color: #f0f0f0;
            border-radius: 3px;
            padding: .2em 0
        }

        html body code::before, html body code::after {
            letter-spacing: -0.2em;
            content: "\00a0"
        }

        html body pre > code {
            padding: 0;
            margin: 0;
            font-size: .85em !important;
            word-break: normal;
            white-space: pre;
            background: transparent;
            border: 0
        }

        html body .highlight {
            margin-bottom: 16px
        }

        html body .highlight pre, html body pre {
            padding: 1em;
            overflow: auto;
            font-size: .85em !important;
            line-height: 1.45;
            border: #d6d6d6;
            border-radius: 3px
        }

        html body .highlight pre {
            margin-bottom: 0;
            word-break: normal
        }

        html body pre code, html body pre tt {
            display: inline;
            max-width: initial;
            padding: 0;
            margin: 0;
            overflow: initial;
            line-height: inherit;
            word-wrap: normal;
            background-color: transparent;
            border: 0
        }

        html body pre code:before, html body pre tt:before, html body pre code:after, html body pre tt:after {
            content: normal
        }

        html body p, html body blockquote, html body ul, html body ol, html body dl, html body pre {
            margin-top: 0;
            margin-bottom: 16px
        }

        html body kbd {
            color: #000;
            border: 1px solid #d6d6d6;
            border-bottom: 2px solid #c7c7c7;
            padding: 2px 4px;
            background-color: #f0f0f0;
            border-radius: 3px
        }

        @media print {
            html body {
                background-color: #fff
            }

            html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
                color: #000;
                page-break-after: avoid
            }

            html body blockquote {
                color: #5c5c5c
            }

            html body pre {
                page-break-inside: avoid
            }

            html body table {
                display: table
            }

            html body img {
                display: block;
                max-width: 100%;
                max-height: 100%
            }

            html body pre, html body code {
                word-wrap: break-word;
                white-space: pre
            }
        }

        .markdown-preview {
            width: 100%;
            height: 100%;
            box-sizing: border-box
        }

        .markdown-preview .pagebreak, .markdown-preview .newpage {
            page-break-before: always
        }

        .markdown-preview pre.line-numbers {
            position: relative;
            padding-left: 3.8em;
            counter-reset: linenumber
        }

        .markdown-preview pre.line-numbers > code {
            position: relative
        }

        .markdown-preview pre.line-numbers .line-numbers-rows {
            position: absolute;
            pointer-events: none;
            top: 1em;
            font-size: 100%;
            left: 0;
            width: 3em;
            letter-spacing: -1px;
            border-right: 1px solid #999;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .markdown-preview pre.line-numbers .line-numbers-rows > span {
            pointer-events: none;
            display: block;
            counter-increment: linenumber
        }

        .markdown-preview pre.line-numbers .line-numbers-rows > span:before {
            content: counter(linenumber);
            color: #999;
            display: block;
            padding-right: .8em;
            text-align: right
        }

        .markdown-preview .mathjax-exps .MathJax_Display {
            text-align: center !important
        }

        .markdown-preview:not([for="preview"]) .code-chunk .btn-group {
            display: none
        }

        .markdown-preview:not([for="preview"]) .code-chunk .status {
            display: none
        }

        .markdown-preview:not([for="preview"]) .code-chunk .output-div {
            margin-bottom: 16px
        }

        .scrollbar-style::-webkit-scrollbar {
            width: 8px
        }

        .scrollbar-style::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: transparent
        }

        .scrollbar-style::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgba(150, 150, 150, 0.66);
            border: 4px solid rgba(150, 150, 150, 0.66);
            background-clip: content-box
        }

        html body[for="html-export"]:not([data-presentation-mode]) {
            position: relative;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            overflow: auto
        }

        html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
            position: relative;
            top: 0
        }

        @media screen and (min-width: 914px) {
            html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
                padding: 2em calc(50% - 457px)
            }
        }

        @media screen and (max-width: 914px) {
            html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
                padding: 2em
            }
        }

        @media screen and (max-width: 450px) {
            html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
                font-size: 14px !important;
                padding: 1em
            }
        }

        @media print {
            html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
                display: none
            }
        }

        html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
            position: fixed;
            bottom: 8px;
            left: 8px;
            font-size: 28px;
            cursor: pointer;
            color: inherit;
            z-index: 99;
            width: 32px;
            text-align: center;
            opacity: .4
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn {
            opacity: 1
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc {
            position: fixed;
            top: 0;
            left: 0;
            width: 300px;
            height: 100%;
            padding: 32px 0 48px 0;
            font-size: 14px;
            box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
            box-sizing: border-box;
            overflow: auto;
            background-color: inherit
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar {
            width: 8px
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: transparent
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgba(150, 150, 150, 0.66);
            border: 4px solid rgba(150, 150, 150, 0.66);
            background-clip: content-box
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a {
            text-decoration: none
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul {
            padding: 0 1.6em;
            margin-top: .8em
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li {
            margin-bottom: .8em
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul {
            list-style-type: none
        }

        html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
            left: 300px;
            width: calc(100% - 300px);
            padding: 2em calc(50% - 457px - 150px);
            margin: 0;
            box-sizing: border-box
        }

        @media screen and (max-width: 1274px) {
            html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
                padding: 2em
            }
        }

        @media screen and (max-width: 450px) {
            html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
                width: 100%
            }
        }

        html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview {
            left: 50%;
            transform: translateX(-50%)
        }

        html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc {
            display: none
        }

        /* Please visit the URL below for more information: */
        /*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

    </style>
</head>
<body for="html-export">
<div class="mume markdown-preview   ">
    <h1 class="mume-header" id="cookie">Cookie</h1>

    <h2 class="mume-header"
        id="cookie%E7%9A%84%E8%AF%9E%E7%94%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8cookie">
        Cookie的诞生，为什么使用Cookie？</h2>

    <ol>
        <li>
            <p>Http无状态，无连接 （对于事务处理没有记忆能力）</p>
        </li>
        <li>
            <p>支持客户端与服务端之间的交互</p>
            <ul>
                <li>表单</li>
            </ul>
        </li>
        <li>
            <p>浏览器取代操作系统？网景 VS 微软</p>
            <ul>
                <li>网景浏览器在它的第一个版本中就开始支持 cookie，现在所有 Web 浏览器都支持 cookie。</li>
            </ul>
        </li>
    </ol>
    <h2 class="mume-header"
        id="%E6%A0%87%E5%87%86%E7%9A%84cookie%E5%8D%8F%E8%AE%AE">
        标准的Cookie协议</h2>

    <p>RFC6265</p>
    <blockquote>
        <p>name、value、expires、max-age、path、domain、secure、http-only （name, path,
            domain）</p>
    </blockquote>
    <p>其他规定: 总个数300 、 大小4Kb 、 相同域名下存储Cookie的个数 20 根据浏览器不同而不同</p>
    <p>操作Cookie的方法</p>
    <p>服务端: resp.setHeader(&quot;Set-Cookie&quot;, &quot;name=value;expires=dd-MM-yyyy
        HH:mm:ss;max-age=Integer;path=/;<a href="http://domain=.baidu.com">domain=.baidu.com</a>;Secure;httpOnl;&quot;);
    </p>
    <p>Js客户端操作: document.cookie</p>
    <p>request : 获取Cookie <em>不是接受所有Cookie</em> 检查domain+path匹配才发，发送内容 name
        &amp; value</p>
    <p>response : all</p>
    <p>明文存储：</p>
    <p>XSS</p>
    <p>截获</p>
    <p>直接获取Cookie</p>
    <p>Cookie是不安全的。</p>
    <p>总结Cookie特点：</p>
    <ol>
        <li>
            <p>保存在客户端：同一类型浏览器。会话Cookie（内存），持久硬盘。</p>
        </li>
        <li>
            <p>生命周期由max-age决定（负数,0,正数）。</p>
        </li>
        <li>
            <p>安全性低，可以加密存放。</p>
        </li>
        <li>
            <p>多个用户浏览器共享</p>
        </li>
    </ol>
    <p>问题：</p>
    <ol>
        <li>
            <p>Cookie什么时候被创建？</p>
        </li>
        <li>
            <p>什么时候被删除？</p>
            <p>*手动</p>
            <p>*自动</p>
        </li>
        <li>
            <p>secure，httpOnly 就足够安全吗？</p>
        </li>
    </ol>
    <h2 class="mume-header" id="cookie%E7%9A%84%E8%B7%A8%E5%9F%9F">
        Cookie的跨域</h2>

    <h3 class="mume-header"
        id="%E9%A1%B6%E7%BA%A7%E5%9F%9F%E5%90%8D%E5%92%8C%E5%AD%90%E5%9F%9F%E5%90%8D%E4%B9%8B%E9%97%B4%E7%9A%84%E8%B7%A8%E5%9F%9F">
        顶级域名和子域名之间的跨域</h3>

    <h4 class="mume-header" id="%E7%A4%BA%E4%BE%8B">示例</h4>

    <p><a href="https://baidu.com/">https://baidu.com/</a> 顶级</p>
    <p><a href="https://www.baidu.com/">https://www.baidu.com/</a> 一级域名</p>
    <p><a href="https://zhidao.baidu.com/">https://zhidao.baidu.com/</a> 二级域名
    </p>
    <h4 class="mume-header" id="%E8%AE%BE%E7%BD%AEcookie">设置Cookie</h4>

    <p>顶级域名的Cookie不能设置成一级或二级域名</p>
    <p>路径为&quot;/&quot; domain 顶级域名</p>
    <p>setcookie(&quot;name1&quot;, &quot;value&quot;, time() + 1000);//
        baidu.com自己可以看到</p>
    <p>setcookie(&quot;name2&quot;, &quot;value&quot;, time() + 1000, &quot;/&quot;,
        &quot;<a href="http://www.baidu.com">www.baidu.com</a>&quot;);//*.www.baidu.com都可以看到
    </p>
    <p>setcookie(&quot;name3&quot;, &quot;value&quot;, time() + 1000, &quot;/&quot;,
        &quot;<a href="http://baidu.com">baidu.com</a>&quot;);//*.baidu.com都可以看到
    </p>
    <p>setcookie(&quot;name4&quot;, &quot;value&quot;, time() + 1000, &quot;/&quot;,
        &quot;<a href="http://zhidao.baidu.com">zhidao.baidu.com</a>&quot;);//设置无效
    </p>
    <p>setcookie(&quot;name4&quot;, &quot;value&quot;, time() + 1000, &quot;/&quot;,
        &quot;<a href="http://login.google.com">login.google.com</a>&quot;);//设置无效
    </p>
    <p><strong>顶级域名</strong></p>
    <p>只能设置domain为顶级域名，不能设置为二级域名或者三级域名等等，否则cookie无法生成</p>
    <p><strong>二级域名</strong></p>
    <p>只能在本域名下或者domain级别高于自身的域名下才会生效。</p>
    <h4 class="mume-header" id="%E4%BF%AE%E6%94%B9cookie">修改COOKIE</h4>

    <p>顶级域名的cookie在顶级域名或者非顶级域名都可以修改。</p>
    <p>二级域名直接修改没特殊。</p>
    <h3 class="mume-header"
        id="%E4%B8%8D%E5%90%8C%E5%9F%9F%E5%90%8D%E4%B9%8B%E9%97%B4%E7%9A%84%E8%B7%A8%E5%9F%9F">
        不同域名之间的跨域</h3>

    <ol>
        <li>
            <p>nginx配代理 proxy_set_header Cookie $http_cookie;</p>
        </li>
        <li>
            <p>CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。</p>
            <p>Access-Control-Allow-Origin:
                <origin> | * // 授权的访问源</origin>
            </p>
            <p>Access-Control-Max-Age:
                <delta-seconds> // 预检授权的有效期，单位：秒</delta-seconds>
            </p>
            <p>Access-Control-Allow-Credentials: true | false // 是否允许携带
                Cookie</p>
            <p>Access-Control-Allow-Methods:
                <method>[,
                    <method>]* // 允许的请求动词</method>
                </method>
            </p>
            <p>Access-Control-Allow-Headers:
                <field-name>[,
                    <field-name>]* // 额外允许携带的请求头</field-name>
                </field-name>
            </p>
            <p>Access-Control-Expose-Headers:
                <field-name>[,
                    <field-name>]* // 额外允许访问的响应头</field-name>
                </field-name>
            </p>
        </li>
    </ol>
    <p>Access-Control-Allow-Credentials: true | false // 是否允许携带 Cookie</p>
    <p>Cookie 依然遵循“同源策略”，只有用目标服务器域名设置的 Cookie 才会上传，而且使用 document.cookie
        也无法读取目标服务器域名下的 Cookie。</p>

</div>


</body>


</html>